<template>
  <div class="w1280">
    <ToolsBar :telescoping_status="false"></ToolsBar>
    <el-card>
      <div class="item">
        <div class="title">
          <h3>基本信息</h3>
          <span>Personal Information</span>
        </div>
        <div class="info">
          <div class="avatar_info">
            <span class="avatar"></span>
            <span class="avatar_border"></span>
          </div>
          <div class="con">
            <p>
              <label for="">I AM:</label>
              {{ userInfo.name }}
            </p>
            <p>
              <label for="">AGE:</label>
              {{ userInfo.age }}
            </p>
            <p>
              <label for="">GRADUATE INSTITUTION:</label>
              {{ userInfo.university }}
            </p>
            <p>
              <label for="">MAJORS:</label>
              {{ userInfo.majors }}
            </p>
            <p>
              <label for="">HOBBIES:</label>
              {{ userInfo.hobbies }}
            </p>
          </div>
        </div>
      </div>
      <div class="item">
        <div class="title">
          <h3>工作经历</h3>
          <span>Work Experience </span>
        </div>
        <div class="info">
          <div class="steps_wrap">
            <div
              class="step_item"
              v-for="(item, index) in experienceList"
              :key="index"
            >
              <p class="step_date">
                <span>{{ item.startDate | formatDate }}</span> 至
                {{ item.endDate | formatDate }}
              </p>
              <el-card>
                <div class="con_top">
                  <h3>{{ item.title }}</h3>
                  <span>{{ item.department }}</span>
                </div>
                <div class="con_info">
                  <p>{{ item.content }}</p>
                </div>
              </el-card>
            </div>
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import ToolsBar from "@/components/toolsBar.vue";
import { mapState } from "vuex";
export default {
  components: {
    ToolsBar,
  },
  computed: {
    ...mapState(["userInfo"]),
  },
  data() {
    return {
      searchWord: "",
      activeIndex: 0,
      experienceList: [],
    };
  },
  filters: {
    formatDate(dt) {
      let date = new Date(dt);
      console.log(date);
      let Y = date.getFullYear();
      let M = date.getMonth() + 1;
      let D = date.getDate();
      M = M < 10 ? "0" + M : M;
      return `${Y}-${M}-${D}`;
    },
  },
  mounted() {
    this.getExperience();
  },
  methods: {
    async getExperience() {
      const result = await this.$axios({
        url: "/experienceApp/experience/100002",
        methods: "GET",
      });
      this.experienceList = result;
    },
  },
};
</script>
<style>
@import "../assets/css/userInfo.css";
</style>